<template>
    <div class="slider-wrapper" :style="getSize">
        <slider class="slider" @change="indicatorChange" interval="4000" auto-play="true" infinite="true">
            <div class="frame" v-for="i in imgList" @click="sliderClick(i)">
                <image :style="getSize" class="image" resize="cover" :src="i.img"></image>
                <text v-if="i.title" class="title">{{i.title}}</text>
            </div>
        </slider>

        <div class="indicator" v-if="imgList.length > 1">
            <div :class="[indicatorIndex == index ? 'indicator-bar-active' : 'indicator-bar']" v-for="(i,index) in imgList"></div>
        </div>
    </div>
</template>

<style scoped>
    .slider-wrapper {
        position: relative;
        flex-direction: column;
        align-items: stretch;
    }
    .indicator {
        position: absolute;
        right: 33px;
        bottom: 0;
        height: 40px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .indicator-bar {
        width: 30px;
        height: 5px;
        border-radius: 8px;
        background-color: #fff;
        opacity: 0.38;
        margin-left: 10px;
    }
    .indicator-bar-active {
        width: 30px;
        height: 5px;
        border-radius: 8px;
        background-color: #fff;
        opacity: 1;
        margin-left: 10px;
    }
    .frame {
        position: relative;
    }
    .title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: 30px;
        padding-right: 30px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        lines: 1;
        text-overflow: ellipsis;
        background-color: rgba(0,0,0,0.5);
        font-size: 32px;
        color: #fff;
        font-family: msyhl;
    }
</style>

<script>
    export default{
        props: {
            imgList: {
                default: [],
                required: true
            },
            width: {
                type: Number,
                default: 0,
                required: true
            },
            height: {
                type: Number,
                default: 0,
                required: true
            }
        },
        data(){
            return{
                indicatorIndex: 0
            }
        },
        methods: {
            indicatorChange(e) {
                this.indicatorIndex = e.index;
            },
            sliderClick(e){
                this.$emit("sliderClick",e);
            }
        },
        computed: {
            getSize(){
                return {
                    width: this.width,
                    height: this.height
                }
            }
        }
    }
</script>
